<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="keywords" content="{$seo_keywords}">
<meta name="description" content="{$seo_description}">
<title>抽奖活动</title>
<link rel="icon" href="{$system.ico}">
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/swiper.min.css">
<script type="text/javascript" src="/themes/template/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/common.js"></script>
<style>
/*抽奖*/
.lottery{background-color:#e74435;padding:0 0 10px 0}
.lottery .lottery-header{width:100%;height:290px;margin:0}
.lottery .lottery-header img{width:100%}
.lottery .grids{width:100%;height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:-100px;position:relative;padding:15px;box-sizing: border-box;}
.lottery .grids .grids-bag{position:absolute;top:0;left:0;width:100%;height:100%}
.lottery .grids .grids-bag img{width: 100%}
.lottery .grids .grids-box{width:280px;height:280px}
.lottery .grids .grids-top{display:flex}
.lottery .grids .grids-top img{width:20px;height:20px}
.lottery .grids .grids-top .grids-title{display:flex;justify-content:center;width:100%;font-size:18px;color:#fff;z-index:999;padding:0 7px}
.lottery .grids .grids-top .grids-title .grids-frequency{color:#ffd68e}
.lottery .grids .winning-tips-list{display:flex;align-items:center;justify-content:center;width:50%;font-size:10px;line-height:20px;height:20px;font-weight:400;color:#fff8f8;margin:10px 0;z-index:999;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3) 51%,hsla(0,0%,100%,0))}
.lottery .grids .winning-tips-list .iconfont{font-size:10px;margin-right:5px}
.lottery .invite-people{display:flex;justify-content:center}
.lottery .invite-people .invite{display:flex;justify-content:center;align-items:center;width:279px;height:38px;font-size:16px;font-weight:600;color:#e74435;background:#ffd68e;box-shadow:0 6px 0 0 rgba(185,16,0,.3);border-radius:38px;margin:38px}
.lottery .mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.8);z-index:9}
.lottery .share-box{z-index:1300;position:fixed;left:0;top:0;width:100%;height:100%}
.lottery .share-box img{width:100%;height:100%}
.lottery .followCode .pictrue{width:250px;height:265px;border-radius:12px;left:50%;top:50%;margin-left:-125px;margin-top:-180px;position:fixed;z-index:10000}
.lottery .followCode .pictrue .code-bg{display:flex;justify-content:center;width:100%;height:100%;background-image:url();background-size:100% 100%}
.lottery .followCode .pictrue .imgs{width:155px;height:155px;margin-top:46px}
.lottery .followCode .mask{z-index:9999}
.lottery .no-lottery{display:flex;justify-content:center;flex-direction:column;align-items:center;font-size:14px;color:#ccc}
.lottery .no-lottery img{padding:25px}
.lottery .lottery_container{width: 100%;height: 100%;}
.lottery .grid_wrap{width:100%;height:100%;position:relative}
.lottery .grid_wrap .lottery_wrap_border{position:absolute;top:0;left:0;width:100%;height:100%}
.lottery .grid_wrap .lottery_wrap_border ul{position:absolute;display:flex;align-items:center;justify-content:center}
.lottery .grid_wrap .lottery_wrap_border ul li{border-radius:50%;width:8px;height:8px;background-color:#bce0e9}
.lottery .grid_wrap .lottery_wrap_border ul li:nth-child(even){width:12px;height:12px;background-color:#f5fbc8}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(odd){width:100%;height:17px;left:0;right:0;flex-direction:row}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(odd) li{margin:0 5px}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(even){width:17px;height:100%;top:0;bottom:0;flex-direction:column}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(even) li{margin:5px 0}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(3){bottom:0}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(4){right:0}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(1) li:nth-child(odd),
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(4) li:nth-child(odd){-webkit-animation:blink_large-data 1s linear infinite;animation:blink_large-data 1s linear infinite}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(1) li:nth-child(even),
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(4) li:nth-child(even){-webkit-animation:blink_small-data 1s linear infinite;animation:blink_small-data 1s linear infinite}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(3) li:nth-child(even),
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(2) li:nth-child(even){width:8px;height:8px;background-color:#bce0e9;-webkit-animation:blink_large-data 1s linear infinite;animation:blink_large-data 1s linear infinite}
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(3) li:nth-child(odd),
.lottery .grid_wrap .lottery_wrap_border ul:nth-child(2) li:nth-child(odd){width:12px;height:12px;background-color:#f5fbc8;-webkit-animation:blink_small-data 1s linear infinite;animation:blink_small-data 1s linear infinite}
.lottery .grid_wrap .lottery_wrap{width:100%;height:100%;font-size:7px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}
.lottery .grid_wrap .lottery_wrap .lottery_grid{width:100%;height:100%;position:relative;box-sizing: border-box;margin:0;padding:0}
.lottery .grid_wrap .lottery_wrap .lottery_grid li{width:30%;height:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;float:left;position:absolute;border-radius:6px;color:#e74435;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;margin:4px;padding:4px;    box-sizing: border-box;}
.lottery .grid_wrap .lottery_wrap .lottery_grid li .in_line{border:1px dashed #ff7f5f;border-radius:6px;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 2px;}
.lottery .grid_wrap .lottery_wrap .lottery_grid li .grid_img{width:50%;height:50%}
.lottery .grid_wrap .lottery_wrap .lottery_grid li .grid_img img{width: 100%}
.lottery .grid_wrap .lottery_wrap .lottery_grid .active{background:#ffd18d!important;box-shadow:0px 4px 0px 0px #ffd18d;color:#0e62ff}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(1){left:1%;top:1%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(2){left:34%;top:1%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(3){left:67%;top:1%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(4){left:67%;top:34%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(5){left:67%;top:67%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(6){left:34%;top:67%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(7){left:1%;top:67%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(8){left:1%;top:34%;background:linear-gradient(0deg,#fff2f2,#fff)}
.lottery .grid_wrap .lottery_wrap .lottery_grid li:nth-of-type(9){left:34%;top:34%;cursor:pointer;color:#fff;font-size:20px;font-weight:bolder}
@-webkit-keyframes blink_large-data{to{width:12px;height:12px;background-color:#f5fbc8}}
@keyframes blink_large-data{to{width:12px;height:12px;background-color:#f5fbc8}}
@-webkit-keyframes blink_small-data{to{width:8px;height:8px;background-color:#bce0e9}}
@keyframes blink_small-data{to{width:8px;height:8px;background-color:#bce0e9}}
.lottery .lottery-msg{width:100%;height:100%;padding:0 2px}
.lottery .lottery-click{width:100%;height:100%}
.lottery .lottery-click img{width: 100%}
.lottery .marquee-wrap{width:100%;height:20px;border-radius:20px;margin:0 auto;overflow:hidden}
.lottery .marquee-wrap .marquee-list{padding:0;height: 20px}
.lottery .marquee-wrap .marquee-list li{width:100%;height:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:0;list-style:none;line-height:20px;text-align:center;color:#fff;font-size:10px;font-weight:400}
.lottery .marquee-wrap .animate-up{transition:all .5s ease-in-out;}
.lottery .show-box{display:flex;flex-direction:column;align-items:center;background-color:#fffefe;margin:20px;padding:4px;border-radius:6px;box-shadow:0 3px 0 0 #fcf5c8}
.lottery .in-border{width:100%;display:flex;flex-direction:column;align-items:center;border:1px dashed #ff7f5f;border-radius:6px;padding:17px 0}
.lottery .table-title{display:flex;align-items:center;margin-bottom:15px}
.lottery .table-title .text{color:#e74435;font-size:18px;font-weight:600;padding:0 6px}
.lottery .table-title img{width:25px;height:8px}
.lottery .table-d{max-height:100px;overflow-y:scroll}
.lottery .table{width:100%}
.lottery .table .table-head,
.lottery .table .table-body{display:flex;justify-content:space-around;width:100%}
.lottery .table .table-head{color:#a57e7e}
.lottery .table .table-head .nickname{width:30%;padding:5px 10px}
.lottery .table .table-head .table-name{width:30%;text-align:left;padding:5px 10px}
.lottery .table .table-head .time{width:40%}
.lottery .table .table-body{color:#282828}
.lottery .table .table-body .nickname{width:30%;font-size:12px;padding:5px 10px}
.lottery .table .table-body .table-name{width:30%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;padding:5px 10px}
.lottery .table .table-body .time{width:40%}
.lottery .content{width:100%;padding:0 10px}
/*弹出*/
.aleart{width:250px;position:fixed;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:9999;top:50%;margin-top:-178px;background-color:#fff;padding:15px;border-radius:6px}
.aleart .title{font-size:18px;color:#e82c27;font-weight:700;text-align:center;padding-bottom:5px;border-bottom:1px solid rgba(232,44,39,.2)}
.aleart .aleart-body{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px 0}
.aleart .aleart-body .goods-img{width:75px;height:75px}
.aleart .aleart-body .msg{font-size:15px;color:#282828}
.aleart .btn{width:100%;padding:7px 0;color:#fff;background:linear-gradient(90deg,#f34a46,#fa9532);border-radius:20px;text-align:center}
.aleart .close{width:23px;height:37px;position:fixed;right:0;top:-36px;display:block}
</style>
</head>
<body>
<div id="app" class="scroll-view-page" v-cloak>
    <div class="lottery">
        <div class="lottery-header">
            <img :src="data.background">
        </div>
        <div class="grids">
            <div class="grids-bag">
                <img src="/plugins/lottery/static/images/lottery-bag.png">
            </div>
            <div class="grids-top">
                <img src="/plugins/lottery/static/images/lottery-number1.png">
                <div class="grids-title">
                    <div>当前积分{{data.get}}个，每次消耗{{data.number}}个</div>
                </div>
                <img src="/plugins/lottery/static/images/lottery-number2.png">
            </div>
            <div class="winning-tips-list">
                <span class="iconfont icon-huabanfuben"><span></span></span>
                <div class="marquee-wrap">
                    <ul ref="marquee" class="marquee-list" :class="{'animate-up': recordStar != 0}">
                        <li v-for="(item, index) in recordList">恭喜您{{item.user.nickname}}，获得{{item.lottery_title}}</li>
                    </ul>
                </div>
            </div>
            <div class="grids-box">
                <div class="lottery_container">
                    <div class="grid_wrap">
                        <div class="lottery_wrap">
                            <ul class="lottery_grid">
                                <li v-for="(item, index) in data.prize" :index="index" :class="{active: lotteryIndex === index}">
                                    <div class="lottery-msg in_line">
                                        <div class="grid_img">
                                            <img :src="item.cover">
                                        </div>
                                        <span class="name"><span>{{item.title}}</span></span>
                                    </div>
                                </li>
                                <li :index="8" class="" @click="lottery()">
                                    <div class="lottery-msg">
                                        <div class="lottery-click">
                                            <img src="/plugins/lottery/static/images/lottery-click.png">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-box">
            <div class="in-border">
                <div class="table-title">
                    <img src="/plugins/lottery/static/images/lottery-left.png">
                    <div class="text">中奖记录</div>
                    <img src="/plugins/lottery/static/images/lottery-right.png">
                </div>
                <div class="table">
                    <div class="table-head">
                        <div class="nickname">昵称</div>
                        <div class="table-name">奖品名称</div>
                        <div class="table-name time">获奖时间</div>
                    </div>
                    <div class="table-d" id="record">
                        <div class="table-body" v-for="(item, index) in recordList">
                            <div class="nickname">{{item.user.nickname}}</div>
                            <div class="table-name">{{item.lottery_title}}</div>
                            <div class="table-name time">{{item.create_time}}</div>
                        </div>
                        <div class="recordLoading" v-if="recordNomore == false && recordLoading == false && recordTotal > recordPageSize">下拉加载更多</div>
                        <div class="recordLoading" v-if="recordLoading"><i class="el-icon-loading"></i>正在加载中...</div>
                        <div class="no-more" v-if="recordNomore && recordPage != 1">已没有更多数据</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-box">
            <div class="in-border">
                <div class="table-title">
                    <img src="/plugins/lottery/static/images/lottery-left.png">
                    <div class="text">活动规则</div>
                    <img src="/plugins/lottery/static/images/lottery-right.png">
                </div>
                <div class="content" v-html="data.rule"></div>
            </div>
        </div>
        <div class="show-box">
            <div class="in-border">
                <div class="table-title">
                    <img src="/plugins/lottery/static/images/lottery-left.png">
                    <div class="text">我的奖品</div>
                    <img src="/plugins/lottery/static/images/lottery-right.png">
                </div>
                <div class="table">
                    <div class="table-head">
                        <div class="nickname">序号</div>
                        <div class="table-name">奖品名称</div>
                        <div class="table-name time">获奖时间</div>
                    </div>
                    <div class="table-d" id="my">
                        <div class="table-body" v-for="(item, index) in myList">
                            <div class="nickname">{{item.id}}</div>
                            <div class="table-name">{{item.lottery_title}}</div>
                            <div class="table-name time">{{item.create_time}}</div>
                        </div>
                        <div class="myLoading" v-if="myNomore == false && myLoading == false && myTotal > myPageSize">下拉加载更多</div>
                        <div class="myLoading" v-if="myLoading"><i class="el-icon-loading"></i>正在加载中...</div>
                        <div class="no-more" v-if="myNomore && myPage != 1">已没有更多数据</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="aleart" v-if="lotteryShow">
        <img src="/plugins/lottery/static/images/close.png" class="close" @click="lotteryTipsClose()">
        <div class="title">抽奖结果</div>
        <div class="aleart-body">
            <img class="goods-img" :src="prize.cover">
            <uni-text class="msg"><span>{{prize.tips}}</span></uni-text>
        </div>
        <div class="btn"  @click="lotteryTipsClose()">好的</div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                prize: {},
                type: locationUrl.get('type'), // integral积分消耗抽奖、orderPay订单支付抽奖、orderComment订单评价抽奖
                lotteryIndex: '',
                lotteryShow: false,
                lotteryLoading: false,
                data: [],
                loading: false,
                myList: [],
                myPage: 1,
                myLoading: false,
                myNomore: false,
                myTotal: 0,
                myPageSize: 10,
                recordList: [],
                recordStar: 0,
                recordPage: 1,
                recordLoading: false,
                recordNomore: false,
                recordTotal: 0,
                recordPageSize: 10,
            }
        },
        created() {
            this.myListGet();
            this.listGet();
        },
        mounted() {
            // 中奖轮播
            let self = this;
            self.recordGet();
            // 分页
            self.$nextTick(() => {
                document.getElementById('my').onscroll = () => {
                    if (self.myLoading == false) {
                        var scrollTop    = document.getElementById('my').scrollTop|window.scrollY;
                        var windowHeight = document.getElementById('my').clientHeight;
                        var scrollHeight = document.getElementById('my').scrollHeight;
                        if (scrollTop + windowHeight >= scrollHeight) {
                            self.myPageChange();
                        }
                    }
                }
                document.getElementById('record').onscroll = () => {
                    if (self.recordLoading == false) {
                        var scrollTop    = document.getElementById('record').scrollTop|window.scrollY;
                        var windowHeight = document.getElementById('record').clientHeight;
                        var scrollHeight = document.getElementById('record').scrollHeight;
                        if (scrollTop + windowHeight >= scrollHeight) {
                            self.recordPageChange();
                        }
                    }
                }
            });
        },
        methods: {
            // 抽奖
            lottery() {
                let self  = this;
                let index = '';
                if (self.lotteryLoading == false) {
                    self.lotteryLoading = true;
                    post('api/lottery/lottery/lottery', {type: self.type}, function(res){
                        if (res.status === 'success') {
                            self.data.get = self.data.get - self.data.number;
                            index = res.data;
                            self.prize = res.prize;
                            let star  = 0;
                            let time  = setInterval(function () {
                                // 转圈
                                self.lotteryIndex++;
                                if (self.lotteryIndex == 8) {
                                    self.lotteryIndex = 0;
                                }
                                // 3秒后
                                setTimeout(function () {
                                    if (self.lotteryIndex == index) {
                                        star++;
                                        // 执行一次
                                        if (star == 1) {
                                            self.lotteryShow  = true;
                                            self.lotteryLoading = false;
                                            clearInterval(time);
                                        }
                                    }
                                }, 3000);
                            },300);
                        } else {
                            self.lotteryLoading = false;
                            self.$notify({showClose: true, message: res.message, type: res.status});
                        }
                    });
                }
            },
            // 关闭抽奖提示
            lotteryTipsClose() {
                this.lotteryShow = false;
                this.lotteryIndex = '';
                this.prize = {};
            },
            // 分页改变时
            myPageChange() {
                if (this.myTotal / this.myPageSize > this.myPage) {
                    this.myPage++;
                    this.myListGet();
                } else {
                    this.myNomore = true;
                }
            },
            // 分页改变时
            recordPageChange() {
                if (this.recordTotal / this.recordPageSize > this.recordPage) {
                    this.recordPage++;
                    this.recordGet();
                } else {
                    this.recordNomore = true;
                }
            },
            // 中奖列表
            recordGet() {
                let self = this;
                post('api/lottery/lottery/record', {type: self.type, page: self.recordPage}, function(res){
                    if (res.status === 'success') {
                        self.recordList = self.recordList.concat(res.data);
                        setInterval(function () {
                            self.recordStar++;
                            if (self.recordStar >= self.recordList.length) {
                                self.recordStar = 0;
                            }
                            let marginTop = self.recordStar * 20;
                            self.$refs.marquee.style.marginTop = '-'+marginTop+'px'
                        },1500);
                    }
                });
            },
            // 我的中奖列表
            myListGet() {
                let self = this;
                post('api/lottery/lottery/my', {type: locationUrl.get('type'), page: self.recordPage}, function(res){
                    if (res.status === 'success') {
                        self.myList = self.myList.concat(res.data);
                    }
                });
            },
            // 获取奖品列表
            listGet() {
                let self = this;
                self.loading = false;
                post('api/lottery/lottery/list', {type: locationUrl.get('type')}, function(res){
                    self.loading = true;
                    if (res.status === 'success') {
                        self.data = res.data;
                    }
                });
            },
        }
    })
</script>
</body>
</html>